<template>
	<view class="pageMain">
		
		<IndexHeader v-model="searchdata"
			@inputclear="searchdata = $event.clear"
			@confirm="confirm(searchdata)"></IndexHeader>
		
		<!-- 精选作者 -->
		<view class="scroll">
			<view class="titleBlock">{{ titleBlock }}</view>
			<scroll-view class="scrollView" scroll-x="true" scroll-left="0" >
				<view class="scrollList" v-for="(item, index) in scrollList" :key="index" >
					<image :src="item.portrait" :mode="item.mode" class="scrollImg">
					<view class="scrollName">{{item.name}}</view>
					<view class="scrollFall">{{item.fall}} {{item.falls}}</view>
					<button type="primary" size="mini" class="followBtn">+关注</button>
				</view>
			</scroll-view>
		</view>
		
		<!-- 热门游记 -->
		<view class="listImg">
			<view class="titleBlock">{{ listTitle }}</view>
			<listBox :listing="listing"></listBox>
		</view>
	
	</view>
</template>
	
<script>
import IndexHeader from '@/components/search/index.vue'
import listBox from '@/components/list/list.vue'
var page = 1;
var pagesize = 2;
export default {
		components:{
			IndexHeader,
			listBox
		}, 
		watch:{
			searchdata(){
				console.log(this.searchdata);
			},
		},
		data() {
			return {
				searchdata:'',
				titleBlock:'精华作者',
				scrollList:[
					{
						portrait:'https://b1-q.mafengwo.net/s15/M00/32/4D/CoUBGV3qZgGAWN3mAAc8NR-YDhU219.jpg',
						name:'爱生活的小美女',
						fall:'20.5w',
						falls:'粉丝',
						mode:'aspectFill'
					},
					{
						portrait:'https://n1-q.mafengwo.net/s15/M00/50/DE/CoUBGV3qcaeAUJBKAAP8Z5F_70c757.jpg',
						name:'爱自由的小猪',
						fall:'13w',
						falls:'粉丝',
						mode:'aspectFill'
					},
					{
						portrait:'https://p1-q.mafengwo.net/s15/M00/57/BA/CoUBGV3rBN6AcGIZAAWt-uxhAIs363.jpg',
						name:'逆风飞翔',
						fall:'12w',
						falls:'粉丝',
						mode:'aspectFill'
					},
					{
						portrait:'http://b1-q.mafengwo.net/s15/M00/10/92/CoUBGV3OrN-ATJRlABD7zT1RGsk450.jpg',
						name:'爱旅游的美少女',
						fall:'8025',
						falls:'粉丝',
						mode:'aspectFill'
					},
				],
				listTitle:'热门游记',
				listing:[]
			}
		},
		onLoad() {
			uni.request({
				url:'http://mock-api.com/aKbvjYKx.mock/api/waflls',
				method: 'get',
				data:{
					page:page,
					pagesize:pagesize,
				},
				success: (res) => {
					console.log(res.data);
					this.listing = eval(res.data);// 将请求到的数据存放放到fall中
				}
			}); 
		},
		onPullDownRefresh() {
			console.log('触发了下拉刷新')
			setTimeout(()=>{
				uni.request({
					  
					url:'http://mock-api.com/aKbvjYKx.mock/api/wafllss', 
					method: 'get',
					data:{
						text:'uni.request'
					},
					success: (res) => {
						console.log(res.data);
						this.listing = eval(res.data);// 将请求到的数据存放放到fall中
					}
				}); 
				uni.stopPullDownRefresh()
			},2000)
		},
		onReachBottom() {
			console.log('页面到底了')
			this.listingData();
		},
		methods: {
			listingData() {
				page++; //每触底一次 page +1
				uni.request({
				   url:'http://mock-api.com/aKbvjYKx.mock/api/wafllsUp',
				   //url:'http://rap2.taobao.org:38080/app/mock/263817/api/fall',
				   data:{
					   page:page,
					   pagesize:2,
					},
					success:(res) => {
						this.pagesize = res.data.pagesize;
						console.log(res);
						 if (res.listing < 12) { //没有数据
							this.loadingText="没有数据了！";
							return;
							this.falg = true
						} 
						console.log(this.listing.length)
						//
						console.log(page);
						this.listing = this.listing.concat(res.data.message); //将数据拼接在一起
						//uni.stopPullDownRefresh()
					}
					/* url:'/api/yilong888/jsonSrc/raw/master/waflls.json',
					method: 'get',
					data:{
						text:'uni.request'
						
					},
					 success:(res) => {
						console.log(res);
						if (res.data===null) {
							this.loadingText="没有数据了！";
							return;
						}
						//page++; //每触底一次 page +1
						//console.log(page++)
						//debugger
						this.fall = this.fall.concat(res.data);
						console.log(res.data);
					}, */
				});
			},
			 
			//搜索回车确定方法
			confirm(searchdata){
				if(searchdata){
					uni.showToast({
						title:this.searchdata,
						icon:'none',
						duration:500
					})
					uni.hideKeyboard()  //收起手机软键盘
				}else{
					uni.showToast({
						title:'请输入搜索内容！',
						icon:'none',
						duration:500
					})
				}
			},
			
		}
}
</script>

<style lang="scss">
@import "../../icon/iconfont.css";	
.pageMain{
	width: 96%;
	padding:0 2%;
.titleBlock{
	font-size: 33rpx;
	letter-spacing: 5rpx;
	padding: 30rpx 0;
	position: relative;
	font-weight: 700;
	.fallMore{
		position: absolute;
		right: 0;
		top:34rpx;
		font-size: 25rpx;
		font-weight:500;
		color: $uni-text-color-placeholder;
	}
}
.scroll{
	width: 100%;
	.scrollView{
		width: 100%;
		white-space: nowrap;
		.scrollList{ 
			-moz-box-shadow:0 0 6px rgba(0,0,0, 0.1);
			 -webkit-box-shadow:0 0 6px rgba(0,0,0, 0.1);
			 box-shadow:0 0 6px rgba(0,0,0, 0.1);
			 border-radius: $uni-border-radius-base;
			 width: 300rpx;
			 height: 400rpx;
			 display:inline-block;
			 text-align: center;
			 margin: 10rpx 20rpx 20rpx 4rpx;
			.scrollImg{
				width: 108rpx;
				height: 108rpx;
				border-radius: 100%;
				margin-top: 40rpx;
			}
			.scrollName{
				color:$uni-text-color;
				font-size: $uni-font-size-rty;
				margin-top: $uni-spacing-col-base;
			}
			.scrollFall{
				color:$uni-text-color-grey;
				font-size: $uni-font-size-six;
				margin-top: $uni-spacing-col-sm;
			}
			.followBtn{
				margin-top: 40rpx;
				background-color: $uni-bg-color-orange;
			}
		}
	}
}
}
</style>
